<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>example</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <style>
        html,
        body{
            height: 100%;
        }
        .container{
            width: 90%;
            padding: 10px 0;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="javascript:;" class="weui-btn weui-btn_default" id="success">成功提示</a>
        <a href="javascript:;" class="weui-btn weui-btn_default" id="loading">加载中提示</a>
        <a href="javascript:;" class="weui-btn weui-btn_default" id="loadingToSuccess">加载成功组合提示</a>
        <a href="javascript:;" class="weui-btn weui-btn_default" id="alert">alert对话框</a>
        <a href="javascript:;" class="weui-btn weui-btn_default" id="confirm">confirm对话框</a>
    </div>
    <script src="public/jquery-1.11.3.js"></script>
    <script src="public/fastclick.js"></script>
    <script src="dist/jquery.plugins.min.js"></script>
    <script>
        FastClick.attach(document.body); // fastclick初始化

        $.toast.init(); // toast插件初始化

        // 成功提示
        $('#success').on('click', function () {
            $.toast.success({
                text: '成功', // 提示，默认为"已完成"
                time: 2000, // 停留时间，默认为1000
                callback: function () { // 悬停结束后的回调函数
                    console.log("It's a callback");
                }
            });
        });

        // 加载中提示
        $('#loading').on('click', function () {
            $.toast.loadingShow({
                text: '通讯中' // 提示，默认为"数据加载中"
            });

            setTimeout(function () {
                $.toast.loadingHide(); // 隐藏加载提示，可以在业务代码或是异步操作回调中使用
            }, 2000);
        });

        // 加载成功组合提示
        $('#loadingToSuccess').on('click', function () {
            $.toast.loadingShow();

            setTimeout(function () {
                $.toast.loadingHide();
                $.toast.success({
                    callback: function () {
                        console.log('there is a success callback');
                    }
                })
            }, 2000);
        });

        // alert对话框
        $('#alert').on('click', function () {
            $.dialog.alert({
                content: '这是内容啊啊啊啊',
                event: function () { // 确认回调函数
                    console.log('alert event');
                }
            });
        });

        // confirm对话框
        $('#confirm').on('click', function () {
            $.dialog.confirm({
                title: '这是标题', // 默认值为"提示信息"
                content: '这是内容',
                main: '主操作', // 默认值为"确定"
                sub: '辅助操作', // 默认值为"取消"
                event: function () { // 主操作回调函数
                    console.log('confirm event');
                },
                subEvent: function () { // 辅助操作回调函数
                    console.log('confirm subevent');
                }
            });
        });
    </script>
</body>
</html>